<template>
  <common-list-tabs>
    <common-tabs slot="tabs" v-model="page" @tab-click="tabChange">
      <el-tab-pane label="服务监控策略" name="common-server"></el-tab-pane>
      <el-tab-pane
        label="中间件监控策略"
        name="common-middleware"
      ></el-tab-pane>
    </common-tabs>
    <component
      slot="content"
      :is="page"
      :key="page"
      @change="change"
      :params="params"
    ></component>
  </common-list-tabs>
</template>

<script>
import CommonServer from "./server";
import CommonMiddleware from "./middleware";

export default {
  name: "index",
  data() {
    return {
      page: "common-server",
      params: {},
    };
  },
  components: {
    CommonServer,
    CommonMiddleware,
  },
  mounted() {},
  methods: {
    change(to, params) {
      this.params = params;
      this.page = `common-${to}`;
    },
    tabChange() {
      this.params = {};
    },
  },
};
</script>

<style scoped lang="scss"></style>
